<template>
  <div id="components-table-demo-size">
    <a-card class="card" :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form-model :model="form" @submit="queryByName">
          <a-row :gutter="48">
            <a-col :md="8" :sm="24">
              <a-form-model-item label="姓名">
                <a-input
                  placeholder="请输入姓名"
                  v-model="queryParam.name"/>
                <a-button type="primary" html-type="submit">查询</a-button>
                <a-button style="margin-left: 8px" @click="resetQuery">重置</a-button>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </div>
      <div class="table-operator">
        <a-button v-action:add type="primary" icon="plus" @click="toAdd()">增加</a-button>
      </div>
      <div class="table">
        <a-table
          :columns="columns"
          :dataSource="patientByNurse"
          size="middle"
          rowKey="id"
          @change="onChange()"
          :loading="loading">
          <span slot="state" slot-scope="text,record">
            <a-tag :color="record.state === 0 || record.state === '0' ? 'geekblue' : 'green'">
              {{ record.state === 0 ? '住院中' : '已出院' }}
            </a-tag>
          </span>
          <span slot="adviceState" slot-scope="text,record">
            <a-tag :color="record.adviceState | colorFilter">
              {{ record.adviceState | stateFilter }}
            </a-tag>
          </span>
          <span slot="action" slot-scope="text,record">
            <template>
              <a v-action:get @click="() => goShow(record)">查 看</a>
            </template>
            <a-divider type="vertical" />
            <a-dropdown>
              <a-menu slot="overlay">
                <a-menu-item v-action:update><a @click="goAdvice(record)">医嘱</a></a-menu-item>
                <a-menu-item v-action:update><a @click="() => goEdit(record)">编辑</a></a-menu-item>
                <a-menu-item v-action:update v-if="record.state === 0"><a @click="()=>goTo(record)">出院</a></a-menu-item>
                <a-menu-item v-action:delete><a class="delete" @click="() => del(record)">删除</a></a-menu-item>
              </a-menu>
              <a>更多<a-icon type="down"/></a>
            </a-dropdown>
          </span>
        </a-table>
      </div>
    </a-card>
  </div>
</template>
<script>
import { getPatient, delPatient, getByName, outPatient, getPatientByNurse } from '../../api/patient'
import moment from 'moment'
import { departmentFilter } from '../../dictionary'

const columns = [{
  title: '姓名',
  dataIndex: 'name',
  align: 'center',
  scopedSlots: { customRender: 'name' }
}, {
  title: '年龄',
  dataIndex: 'age',
  align: 'center',
  scopedSlots: { customRender: 'age' }
}, {
  title: '性别',
  dataIndex: 'gender',
  align: 'center',
  scopedSlots: { customRender: 'gender' },
  customRender: (gender) => gender === 0 || gender === '0' ? '男' : '女'
}, {
  title: '状态',
  dataIndex: 'state',
  align: 'center',
  scopedSlots: { customRender: 'state' },
  filters: [{
    text: '住院',
    value: 0
  },
  {
    text: '出院',
    value: 2
  }],
  filterMultiple: true,
  onFilter: (value, record) => record.state === value
}, {
  title: '入院日期',
  dataIndex: 'comeDate',
  align: 'center',
  scopedSlots: { customRender: 'comeDate' }
},
{
  title: '住院部门',
  dataIndex: 'department',
  align: 'center',
  scopedSlots: { customRender: 'department' },
  customRender: departmentFilter
}, {
  title: '医嘱状态',
  dataIndex: 'adviceState',
  align: 'center',
  scopedSlots: { customRender: 'adviceState' }
},
{
  title: '操作',
  dataIndex: 'action',
  align: 'center',
  scopedSlots: { customRender: 'action' }
}]
const data = []
const formatterTime = (val) => {
  return val ? moment(val).format('YYYY-MM-DD') : ''
}
export default {
  name: 'PatientIndex',
  data () {
    return {
      data,
      patientByNurse: [],
      columns,
      loading: true,
      form: this.$form.createForm(this),
      user: this.$store.getters.userInfo,
      queryParam: {
        name: ''
      }
    }
  },
  methods: {
    toAdd () {
      this.$router.push('/patient/add')
    },
    goAdvice (record) {
      this.$router.push('/advice/index?id=' + record.id)
    },
    goEdit (record) {
      this.$router.push('/patient/edit?id=' + record.id)
    },
    goTo (record) {
      // const _this = this
      this.$confirm({
        title: '警告',
        content: `確定病人已經出員工了 ${record.name} 吗?`,
        okText: '病人出院',
        okType: 'danger',
        cancelText: '取消',
        onOk () {
          outPatient(record.id).then(res => {
            record.state = 2
            // _this.$router.go(0)
          }).catch(res => {})
        },
        onCancel () {}
      })
    },
    goShow (record) {
      console.log('record', record)
      this.$store.dispatch({
        type: 'setShow',
        data: record
      })
      this.$router.push('/patient/show')
    },
    formatterTime,
    del (row) {
      const _this = this
      this.$confirm({
        title: '警告',
        content: `真的要删除 ${row.name} 吗?`,
        okText: '删除',
        okType: 'danger',
        cancelText: '取消',
        onOk () {
          delPatient(row.id).then(res => {
            const index = _this.getArrayIndex(_this.data, row)
            console.log('index', index)
            _this.data.splice(index, 1)
          }).catch(res => {})
        },
        onCancel () {}
      })
    },
    getArrayIndex (arr, obj) {
      let i = arr.length
      while (i--) {
        if (arr[i] === obj) {
          return i
        }
      }
      return -1
    },
    getDate () {
      getPatient(null, this.user.department).then(res => {
        console.log('res', res)
        this.data = res.result
        this.loading = false
      }).catch(res => {
        this.loading = false
        alert(res)
      })
      getPatientByNurse(this.user.id, this.user.role.id, this.user.department).then(res => {
        this.patientByNurse = res.result
        console.log('res', res)
      }).catch(err => {
        console.log('err', err)
      })
    },
    resetQuery () {
      this.getDate()
      this.queryParam.name = ''
    },
    queryByName (e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          getByName(this.queryParam.name).then(res => {
            this.data = res.result // 后台数据给到data ，data是表的数据源
            console.log('res data', this)
          }).catch(res => {
            console.log(res)
          })
        }
      })
    }
  },
  filters: {
    departmentFilter,
    colorFilter (value) {
      switch (value) {
        case 1 : return 'red'
        case 2 : return 'blue'
        case 3 : return 'green'
        case 4 : return 'gray'
        default: return 'gray'
      }
    },
    stateFilter (value) {
      switch (value) {
        case 1 : return '等待核对'
        case 2 : return '等待取药'
        case 3 : return '等待执行'
        case 4 : return '已完成'
        default: return '未输入医嘱'
      }
    }
  },
  created () {
    console.log(this.user)
    this.getDate()
  }
}
</script>

<style scoped>
  .table {
    margin-top: 14px;
  }
</style>
